<template>
  <view class="container">
    <view class="card">
      <view class="card-header">
        <view class="title">服务评价</view>
      </view>
      
      <view class="rate-section">
        <view class="rate-title">请为本次服务打分</view>
        <view class="rate-wrapper">
          <u-rate
            v-model="rating"
            count="5"
            activeColor="#f9ae3d"
            size="40"
          ></u-rate>
        </view>
      </view>
      
      <view class="comment-section">
        <view class="comment-title">评价内容 (可选)</view>
        <u-input
          v-model="reviewContent"
          type="textarea"
          placeholder="请输入您对本次服务的评价，如环境整洁度、服务态度等"
          height="180"
          maxlength="200"
          count
        ></u-input>
      </view>
    </view>
    
    <view class="btn-wrapper">
      <u-button type="primary" text="提交评价" @click="submitRating"></u-button>
    </view>
  </view>
</template>

<script>
import { getCleaningBookingDetail, rateCleaningBooking } from '@/api/services'

export default {
  data() {
    return {
      bookingId: null,
      rating: 5,
      reviewContent: '',
      bookingDetail: {}
    }
  },
  onLoad(options) {
    if (options.id) {
      this.bookingId = options.id
      this.loadBookingDetail()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 加载预约详情
    loadBookingDetail() {
      uni.showLoading({ title: '加载中...' })
      
      getCleaningBookingDetail(this.bookingId)
        .then(res => {
          this.bookingDetail = res.data || {}
          
          // 验证是否可评价
          if (this.bookingDetail.status !== 'completed') {
            uni.showToast({
              title: '当前预约状态不允许评价',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
        .catch(err => {
          uni.showToast({
            title: '加载失败：' + err.message,
            icon: 'none'
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
    
    // 提交评价
    submitRating() {
      if (this.rating < 1) {
        uni.showToast({
          title: '请至少选择1颗星',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({ title: '提交中...' })
      
      const data = {
        rating: this.rating,
        review_content: this.reviewContent
      }
      
      rateCleaningBooking(this.bookingId, data)
        .then(() => {
          uni.showToast({
            title: '评价成功',
            icon: 'success'
          })
          
          // 返回详情页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
        .catch(err => {
          uni.showToast({
            title: '评价失败：' + err.message,
            icon: 'none'
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  padding-bottom: 150rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: center;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.rate-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.rate-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.rate-wrapper {
  padding: 20rpx 0;
}

.comment-section {
  margin-bottom: 30rpx;
}

.comment-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.btn-wrapper {
  padding: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>